<template>
  <view :style="'height:' + height + 'px;' + 'overflow:auto'">
    <!-- 选择展示的任务表 -->
    <view class="navBar">
      <van-dropdown-menu>
        <van-dropdown-item
          :value="defaultBoard"
          :options="board"
          @change="boardChange"
        />
      </van-dropdown-menu>
    </view>

    <!-- 具体的todo列表 -->
    <view class="sd-container">
      <view v-for="(dayTodo, dayIndex) in todoList" :key="dayIndex">
        <!-- 每个日期块对应的日期信息 -->
        <view class="sd-head-DW">
          <view class="sd-head-DW-right"> {{ getDate(dayTodo) }} </view>
          <view class="sd-head-DW-left">
            -----------------------------------------------
          </view>
        </view>

        <!-- 内容 -->
        <view class="sd-center">
          <!-- 日程安排列表 -->
          <view
            class="sd-center-item"
            v-for="(item, index) in dayTodo"
            :key="index"
          >
            <!-- 事件未完成时根据紧急程度显示不同颜色 -->
            <view
              v-if="item.t_isfinished != 1"
              :class="
                ' sd-center-item-hot ' +
                (item.t_isfinished == 1
                  ? 'sd-color-gray'
                  : item.urgent == 1
                  ? 'sd-color-normal'
                  : item.urgent == 2
                  ? 'sd-color-middle'
                  : 'sd-color-high')
              "
              @click="changeTodoFinishState(item, true)"
              :data-index="index"
            >
              •
            </view>

            <!-- 事件完成时显示对号 -->
            <view
              v-if="item.t_isfinished == 1"
              class="sd-center-item-hot"
              @click="changeTodoFinishState(item, false)"
              :data-index="index"
            >
              <image class="sd-center-item-img" :src="ic_done"></image>
            </view>

            <!-- 事件标题 -->
            <view
              :class="
                ' sd-center-item-time ' +
                (item.t_isfinished == 1 ? ' sd-color-gray1' : '')
              "
              @click="goToDetail(item)"
              :data-index="index"
            >
              {{ item.t_title }}
            </view>

            <!-- 时间具体内容 -->
            <view
              :class="
                ' sd-center-item-content ' +
                (item.t_isfinished == 1 ? ' sd-color-gray1' : '')
              "
              @click="goToDetail(item)"
              :data-index="index"
            >
              {{ descShow(item.t_desc) }}
            </view>

            <!-- 具体时间 -->
            <view
              :class="
                ' sd-center-item-use ' +
                (item.t_isfinished == 1 ? ' sd-color-gray1' : '')
              "
              @click="goToDetail(item)"
              :data-index="index"
            >
              {{ getTime(item.t_time) }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 详情框 -->
    <van-popup
      :show="popupShow"
      position="bottom"
      custom-style="height: 80%;"
      @close="popupClose"
      round
    >
      <add-todo
        v-if="popupShow"
        :todoFromParent="todoDetail"
        :state="2"
        @addFinish="popupClose"
      ></add-todo>
    </van-popup>
  </view>
</template>

<script>
import { addTodo } from '../addTodo/addTodo';
export default {
  components: { addTodo },
  data() {
    return {
      board: [],
      defaultBoard: '',
      todoList: [],
      pic_default: '/static/todo/images/pic_default.png',
      ic_done: '/static/todo/images/ic_done.png',
      hasScheduleDay: false,
      popupShow: false,
      todoDetail: {},
    };
  },
  props: ['height'],
  computed: {},
  methods: {
    descShow(desc) {
      return desc == null ? '' : desc;
    },
    async addBoard() {
      console.log('addBoard');
    },
    boardChange(e) {
      console.log(e.detail);
      // 请求获得对应对应内容并展示
      this.getTodoList(e.detail);
    },
    onCheckboxChange(e, todo) {
      console.log(e.detail);
      todo.t_isfinished = e.detail;
    },
    async changeTodoFinishState(item, finishState) {
      console.log(item);
      const res = await this.hjRequest.run('setTodoState', {
        todo_id: item._id,
        finished: finishState,
      });
      if (res.result.updatedCount == 1) {
        //修改成功
        item.t_isfinished = finishState;
        wx.showToast({
          title: `修改成功`,
          duration: 500,
        });
      }

      console.log(res);
    },
    goToDetail(item) {
      // 跳转到详情页
      console.log(item);
      this.popupShow = true;
      this.todoDetail = item;
      console.log('跳转到详情页');
    },
    async popupClose() {
      await this.getTodoList(this.board[0].value);

      this.popupShow = false;
    },
    async delTodo(todoInfo, index) {
      const res = await this.hjRequest.run('delTodo', { _id: todoInfo._id });
      this.todoList.splice(index, 1);
      console.log(res);
    },
    async getBoard() {
      const res = await this.hjRequest.run('findBoard');
      console.log(res);
      // this.board = res.boardList
      this.board = [];
      res.boardList.forEach((item) => {
        this.board.push({
          text: item.b_title,
          value: item._id,
        });
      });
      this.defaultBoard = this.board[0].value;
    },
    async getTodoList(boardId) {
      console.log(boardId);
      const res = await this.hjRequest.run('findTodoByBoard', {
        board_id: boardId,
      });

      var todoListTemp = res.ret;
      // 对todoList排序
      todoListTemp.sort((a, b) => {
        return a.t_time.localeCompare(b.t_time);
      });
      console.log(todoListTemp);
      this.todoList = [[]];
      if (todoListTemp.length == 0) {
        return;
      }
      var board_title;
      var board_index;
      this.board.forEach((item, index) => {
        if (item.value == boardId) {
          board_title = item.text;
          board_index = index;
        }
      });

      var time = new Date(todoListTemp[0].t_time).getDate();
      var index = 0;
      // 按天分类
      todoListTemp.forEach((item) => {
        item.t_time = new Date(item.t_time);
        item.t_board = {
          board_id: boardId,
          board_title,
          board_index,
        };
        var itemDate = item.t_time.getDate();
        if (itemDate == time) {
          this.todoList[index].push(item);
        } else {
          time = itemDate;
          this.todoList.push([]);
          index++;
          this.todoList[index].push(item);
        }
      });
      console.log(this.todoList);
    },
    getDate(dayTodo) {
      var date = new Date(dayTodo[0].t_time);
      // console.log(date)
      var retStr =
        date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + date.getDate();
      return retStr;
    },
    getTime(time) {
      var date = new Date(time);
      var hour = date.getHours();
      var minute = date.getMinutes();
      if (hour < 10) {
        hour = '0' + hour;
      }
      if (minute < 10) {
        minute = '0' + minute;
      }
      var retStr = hour + ':' + minute;

      return retStr;
    },
    async init() {
      await this.getBoard();
      await this.getTodoList(this.board[0].value);
    },
  },
  async created() {
    await this.getBoard();
    await this.getTodoList(this.board[0].value);
    console.log(this.height);
  },
};
</script>
<style scoped>
@import './todo.css';
.navBar {
  background-color: #fff;
}
</style>
